<!-- StatsCard.vue -->
<template>
  <uni-card is-full>
    <template v-slot:title>
      <view class="flex-space mt-20">
        <view>{{ title }}</view>
        <uni-data-checkbox 
          v-if="showTimeFilter"
          v-model="localTimeValue" 
          :localdata="timeDate" 
          @change="handleTimeChange"
		  mode="tag"
        />
      </view>
    </template>
    <view class="form">
      <view class="form-item" v-for="item in stats" :key="item.label">
        <view class="label"><text>{{ item.label }}</text></view>
        <view>{{ item.value }} {{ item.unit || '' }}</view>
      </view>
    </view>
  </uni-card>
</template>
<script setup>
import { ref, computed, watch } from 'vue';
import { onReady } from '@dcloudio/uni-app';

const props = defineProps({
  // 卡片标题
  title: {
    type: String,
    required: true
  },
  // 统计项配置
  stats: {
    type: Array,
    required: true,
    validator: (value) => {
      return value.every(item => {
        return 'label' in item && 'value' in item;
      });
    }
  },
  // 是否显示时间筛选器
  showTimeFilter: {
    type: Boolean,
    default: true
  },
  // 当前选中的时间值
  timeValue: {
    type: Number,
    default: 2 // 默认本月
  },
  // 时间选项
  timeOptions: {
    type: Array,
    default: () => [
      { value: 1, text: '本周' },
      { value: 2, text: '本月' },
      { value: 3, text: '本年' },
      { value: 4, text: '全部' }
    ]
  },
  // 是否全宽
  isFull: {
    type: Boolean,
    default: true
  },
  // 是否有阴影
  isShadow: {
    type: Boolean,
    default: false
  },
  // 是否有边框
  border: {
    type: Boolean,
    default: false
  },
  // 是否加载中
  loading: {
    type: Boolean,
    default: false
  },
  // 加载中文字
  loadingText: {
    type: Object,
    default: () => ({
      contentdown: '上拉显示更多',
      contentrefresh: '正在加载...',
      contentnomore: '没有更多数据'
    })
  },
  // 是否错误状态
  error: {
    type: Boolean,
    default: false
  },
  // 错误信息
  errorMessage: {
    type: String,
    default: '数据加载失败'
  },
  // 是否显示趋势箭头
  showTrend: {
    type: Boolean,
    default: false
  },
  // 数值格式化函数
  formatter: {
    type: Function,
    default: (value) => value
  }
});

const emit = defineEmits([
  'time-change',  // 时间筛选变化事件
  'retry',        // 重试事件
  'item-click'    // 统计项点击事件
]);

const localTimeValue = ref(props.timeValue);
const timeDate = [
  { value: 1, text: '本周' },
  { value: 2, text: '本月' },
  { value: 3, text: '本年' },
  { value: 4, text: '全部' },
];
// 处理后的统计项数据
const processedStats = computed(() => {
  return props.stats.map(item => ({
    ...item,
    value: props.formatter(item.value)
  }));
});

// 格式化数值
const formatValue = (value) => {
  if (typeof value === 'number') {
    // 大数字添加千分位分隔符
    return value.toLocaleString();
  }
  return value;
};

// 时间筛选变化处理
const handleTimeChange = (e) => {
  emit('time-change', localTimeValue.value);
};

// 重试按钮点击
const handleRetry = () => {
  emit('retry');
};

// 显示提示信息
const showTip = (tip) => {
  uni.showToast({
    title: tip,
    icon: 'none',
    duration: 2000
  });
};

// 统计项点击
const handleItemClick = (item) => {
  emit('item-click', item);
};

// 监听外部timeValue变化
watch(() => props.timeValue, (newVal) => {
  localTimeValue.value = newVal;
});

// 组件准备好后触发
onReady(() => {
  // 可以在这里添加一些初始化逻辑
});
</script>
<style lang="scss" scoped>
	.form .form-item {
				border: none;
				margin-bottom: 0rpx;
				
			}
			.form .form-item .label {
				font-size: 28rpx;
				margin-bottom: 0rpx;
			}
			.flex-space {
			    display: flex;
			    justify-content: space-between;
			    align-items: center;
				
			  }
			.flex-space :deep(.uni-data-checklist .checklist-group .checklist-box) {
			  margin-right: 2px !important;
			}
</style>